<ion-content>
  <h5 padding-left> Search - Default </h5>
  <ion-searchbar [(ngModel)]="defaultSearch" type="tel" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>

  <h5 padding-left> Search - Animated </h5>
  <ion-searchbar animated="true" showCancelButton debounce="500" (ionInput)="triggerInput($event)" (ionBlur)="inputBlurred($event)" (ionFocus)="inputFocused($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)"></ion-searchbar>

  <p padding-left>
    defaultSearch: <b>{{ defaultSearch }}</b>
  </p>

  <h5 padding-left> Search - Custom Placeholder </h5>
  <ion-searchbar [autocorrect]="isAutocorrect" showCancelButton="true" [autocomplete]="isAutocomplete" [spellcheck]="isSpellcheck" type="number" [(ngModel)]="customPlaceholder" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" placeholder="Filter Schedules"></ion-searchbar>

  <p padding-left>
    customPlaceholder: <b>{{ customPlaceholder }}</b>
  </p>

  <h5 padding-left> Search - No Cancel Button </h5>
  <ion-searchbar autocorrect="off" autocomplete="off" spellcheck="true" type="text" [(ngModel)]="defaultCancel" (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" showCancelButton="false"></ion-searchbar>

  <p padding-left>
    defaultCancel: <b>{{ defaultCancel }}</b>
  </p>

  <h5 padding-left> Search - Custom Cancel Button Danger </h5>
  <ion-searchbar (ionInput)="triggerInput($event)" showCancelButton (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" color="danger"></ion-searchbar>

  <h5 padding-left> Search - Value passed </h5>
  <ion-searchbar value="mysearch" showCancelButton (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" color="dark"></ion-searchbar>

  <h5 padding-left> Search - Mode iOS</h5>
  <ion-searchbar mode="ios" animated="true" showCancelButton placeholder="Search"></ion-searchbar>

  <h5 padding-left> Search - Mode MD</h5>
  <ion-searchbar mode="md" animated="true" showCancelButton placeholder="Search"></ion-searchbar>

  <h5 padding-left> Search - Mode WP</h5>
  <ion-searchbar mode="wp" animated="true" showCancelButton placeholder="Search"></ion-searchbar>

  <h5 padding-left> Search - Animated and No Cancel</h5>
  <ion-searchbar [placeholder]="'Search'" [animated]="true" [showCancelButton]="false"></ion-searchbar>

  <p padding>
    <button ion-button block (click)="changeValue()">Change Value</button>
  </p>
</ion-content>
